<template>
	<view class="container">
		<!-- 商品图片 -->
		<view class="" v-if="orderDetail.coverImage && orderDetail.coverImage.length>0">
			<image class="dish-image" :src="orderDetail.coverImage[0].url" mode="" />
		</view>



		<!-- 标题与价格 -->
		<view class="dish-info section">
			<view class="title-row">
				<text class="dish-title">{{orderDetail.comboName}}</text>
				<text class="tag">{{orderDetail.taste}}</text>
			</view>
			<view class="price-row">
				<view class="flex_align_conter">
					<text class="price">¥ <text class="f18">{{orderDetail.price}}</text> </text>
					<text class="sold-info">库存：{{orderDetail.stockNum || 0}}</text>
					<text class="sold-info">销量：{{orderDetail.num || 0}}</text>
				</view>
				<button class="cu-btn bg-green round add-cart-btn" @click="addShoppingCart">加入购物车</button>
			</view>
		</view>

		<!-- 食材介绍 -->
		<view class="section">
			<view class="section-title">食材介绍</view>
			<view class="section-content">
				{{orderDetail.description}}
			</view>
		</view>

		<!-- 食材清单 -->
		<view class="section">
			<view class="section-title flex_between">
				<view class="">
					食材清单
				</view>
				<!-- <view class="view-more">查看全部详情</view> -->
			</view>


			<view class="ingredient-list">
				<view class="ingredient-item" v-for="item in orderDetail.foodIngredientsDishList" :key="item.name">
					<text class="name">{{ item.ingredientsName }}</text>
					<text class="weight">{{ item.num }}{{getUnit(item.unit)}}</text>
				</view>
			</view>
		</view>

		<!-- 热量 -->
		<view class="section">
			<view class="section-title">热量</view>
			<view class="section-content">约 {{orderDetail.heat}}千焦 / 份</view>
		</view>

		<!-- 过敏源 -->
		<view class="section" v-if="orderDetail.allergy">
			<view class="section-title">过敏源</view>
			<view class="section-content">{{orderDetail.allergy}}</view>
		</view>

		<!-- 确认按钮 -->
		<view class="footer">
			<button class="confirm-btn cu-btn bg-green round ">确认</button>
		</view>
	</view>
</template>

<script>
	import {
		mapState
	} from 'vuex'
	import {
		getUnitTypeAPI,
		getComboDetailAPI
	} from '@/api/index.js'
	export default {
		data() {
			return {
				paramsData: {},
				orderDetail: {},
				unitTypeList: [],
			};
		},
		onLoad(e) {
			this.paramsData = e
			this.getUnitType()
			this.getComboDetail()
		},
		computed: {
			...mapState({
				shoppingBagData: state => state.user.shoppingBagData
			}),
		},
		methods: {
			addShoppingCart() {
				this.paramsData.saleNum++
				this.handleUpdateNum(this.paramsData.saleNum)
				this.$tab.navigateBack()
			},
			handleUpdateNum(newNum) {
				// console.log(this.shoppingBagData);
				// return
				const newtData = this.updateNumById(newNum)
				this.$store.commit('SET_SHOPPINGBAGDATA', newtData)
				this.$emit('undateData')

			},
			updateNumById(newNum = 0, clearAll = false) {
				return this.shoppingBagData.map(day => {
					const newDay = JSON.parse(JSON.stringify(day))
					const meals = ['meals1', 'meals2']
					const lists = ['comboList', 'dishList']

					meals.forEach(mealKey => {
						lists.forEach(listKey => {
							const list = newDay.dictDataList?.[mealKey]?.[listKey]
							if (Array.isArray(list)) {
								list.forEach(item => {
									// 如果是清空所有，或者当前 item.id 匹配目标 id，就设置 num
									if (clearAll || item.lzy_id === this.paramsData
										.lzy_id) {
										item.saleNum = newNum
									}
								})
							}
						})
					})

					return newDay
				})
			},

			getUnit(e) {
				if (this.unitTypeList.length == 0) return
				const arr = this.unitTypeList.filter(item => item.dictValue == e)
				// const arr = this.unitTypeList.filter(item => {
				// 	console.log(item.dictCode);
				// })
				// console.log(arr);
				return arr[0].dictLabel
			},
			async getUnitType() {
				const res = await getUnitTypeAPI()
				this.unitTypeList = res.data
			},
			async getComboDetail() {
				const res = await getComboDetailAPI(this.paramsData.id)
				this.orderDetail = res.data
				if (res.data.coverImage) {
					this.orderDetail.coverImage = JSON.parse(res.data.coverImage)
				}
			}
		}
	};
</script>

<style lang="scss" scoped>
	.container {
		padding: 20rpx;
		background: #F2F2F2;
	}

	.dish-image {
		width: 100%;
		// height: 100%;
		height: 600rpx;
		border-radius: 12rpx;
		display: block;
		// margin: 20rpx auto;
	}

	.dish-info {
		margin-top: 20rpx;
		padding: 0 10rpx;

	}

	.title-row {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.dish-title {
		font-size: 28rpx;
		font-weight: 500;
	}

	.tag {
		margin-left: 10rpx;
		display: inline-block;
		border-radius: 8rpx;
		/* 主色 */
		background: #E6F7F1;
		font-size: 20rpx;
		color: #0EB275;
		padding: 10rpx 20rpx;
	}

	.price-row {
		margin-top: 20rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		font-size: 26rpx;
		color: #999;

		.sold-info {
			margin-right: 22rpx;
			font-size: 20rpx;
			font-weight: 350;

			/* 次要 */
			color: #848484;
		}
	}

	.price {
		margin-right: 40rpx;
		font-size: 20rpx;
		// color: #e74c3c;
		color: #323232;
	}

	.add-cart-btn {
		padding: 0 20rpx;
		height: 40rpx;
		border-radius: 4rpx;
		font-size: 20rpx;
	}

	.section {

		border-radius: 8rpx;
		padding: 24rpx 32rpx;
		background: #fff;
		margin-top: 30rpx;
	}

	.section-title-row {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.section-title {
		position: relative;
		font-size: 28rpx;
		font-weight: 500;
		padding-bottom: 20rpx;

	}

	.section-title::before {
		content: '';
		position: absolute;
		bottom: 0;
		left: 0;
		width: 100%;
		height: 2rpx;
		background-color: #eee;

	}

	.view-more {
		font-size: 24rpx;
		color: #0EB275;
	}

	.section-content {
		margin-top: 16rpx;
		font-size: 20rpx;
		/* 次要 */
		color: #848484;
	}

	.ingredient-list {
		margin-top: 10rpx;
	}

	.ingredient-item {
		display: flex;
		justify-content: space-between;
		padding: 8rpx 0;
		// border-bottom: 1rpx solid #f0f0f0;
		font-size: 24rpx;
		/* 次要 */
		color: #848484;
	}

	.footer {
		text-align: center;
		margin-top: 40rpx;
		padding: 20rpx;
	}

	.confirm-btn {
		// width: 100%;
		padding: 0 100rpx;
		height: 70rpx;
		background: #0EB275;
		color: #fff;
		font-size: 30rpx;
		// border-radius: 16rpx;
	}
</style>